<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import axios from "@/util/axios";


const queryForm = ref({
  query: "",
  pageNum:1,
  pageSize:10
});

const total = ref(0)

const tableData = ref([])

const initUserList = async()=>{
    const res = await axios.post("admin/user/list",queryForm.value)
    tableData.value=res.data.userList;
    total.value=res.data.total;
}

initUserList();

// 实现页数
const handleSizeChange=(pageSize)=>{
    queryForm.value.pageNum=1;
    queryForm.value.pageSize=pageSize;
    initUserList();
}
const handleCurrentChange =(pageNum)=>{
    queryForm.value.pageNum = pageNum;
    initUserList();
}


</script>

<template>
    <!-- el-card悬浮框 -->
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input
          placeholder="请输入搜索内容"
          v-model="queryForm.query"
          clearable
        ></el-input>
      </el-col>
      <el-button type="button" :icon="Search" @click="initUserList">搜索</el-button>
    </el-row>
    <el-table :data="tableData" height="500" style="width: 100%">
      <el-table-column prop="id" label="#id" width="80" />
      <el-table-column prop="nickName" label="用户名称" width="200" />
      <el-table-column prop="avatarUrl" label="头像" width="200">
        <!-- 下面是用于显示头像图片，没有下面三行的话头像只显示字符串地址 -->
        <template v-slot="scope">
            <img :src="scope.row.avatarUrl" width="50" height="50">
        </template>
      </el-table-column>
      <el-table-column prop="openid" label="openId"/>
      <el-table-column prop="registerDate" label="注册日期" width="200"/>
      <el-table-column prop="lastLoginDate" label="最后登录日期" width="200"/>
      
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 40, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
 
  </el-card>
</template>

<style scoped>
 .header{
  padding-bottom: 16px;
  box-sizing: border-box;
 }
 .el-pagination{
  padding-top: 15px;
  box-sizing: border-box;
 }
</style>